//评论组件
<template>
  <div class="comment">
    <p>收到评论</p>
    <div v-for='comment in commentInfor' class="content" :key='comment.commentContent'>
      <p>
        <span class="name">{{comment.name}}</span>
        <span>评论了你的文章</span>
        <span v-colorful='color'>{{comment.bookName | book}}</span>
      </p>
      <p>{{comment.commentDate}}</p>
      <p>{{comment.commentContent}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "comment",
  data() {
    return {
      commentInfor: [
        {
          name: "嘻嘻哈哈",
          bookName: "APP性能优化方案",
          commentContent: "优化优化及极致!",
          commentDate: "2017-10-30 8:20"
        },
        {
          name: "嘻嘻哈哈",
          bookName: "APP性能优化方案",
          commentContent: "呼哈~~APP性能优异!",
          commentDate: "2017-10-30 8:20"
        }
      ],
      color: "red"
    };
  },
  methods: {},
  filters: {
    book(data) {
      return `《${data}》`;
    }
  },
  directives: {
    colorful(el, binding) {
      el.style.color = binding.value;
    }
  }
};
</script>

<style scoped>
.comment {
  padding-top: 80px;
}

p {
  padding-bottom: 0.3rem;
  padding-left: 3px;
  margin-left: 20px;
}

div.content {
  margin-left: 20px;
  padding: 1rem 0;
  border-top: 1px solid black;
}
span.name {
  padding-right: 1rem;
  font-weight: bold;
}
</style>
